<template>
  <div class="home">
    <div class="header">
      <div class="address">
        <van-cell is-link @click="showPopup">{{this.address}}</van-cell>
        <van-popup v-model="show">
          <input v-model="address" type="text" placeholder="请输入您所在的城市名">
        </van-popup>
      </div>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4001282595,3913030257&fm=26&gp=0.jpg" alt=""></van-swipe-item>
      <van-swipe-item><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2313420107,2175541352&fm=26&gp=0.jpg" alt=""></van-swipe-item>
      <van-swipe-item><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=12253162,2337780610&fm=26&gp=0.jpg" alt=""></van-swipe-item>
      <van-swipe-item><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2487162693,3145206317&fm=11&gp=0.jpg" alt=""></van-swipe-item>
    </van-swipe>
    <Choose />
    <Doctor />
  </div>
</template>

<script>
import { Toast } from 'vant'
import Choose from '../components/first/Choose.vue'
import Doctor from '../components/first/Doctor.vue'
export default {
  name: 'Home',
  data () {
    return {
      show: false,
      search: '',
      address: '北京',
      value: ''
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onSearch (val) {
      Toast(val)
      this.value = ''
    }
  },
  components: {
    Choose,
    Doctor
  }
}
</script>

<style lang="scss">
.home {
  height: 100%;
  background-color: rgb(240, 240, 240);
}
.header {
  height: 40px;
  .address {
    float: left;
    color: #666;
    font-size: 14px;
    .van-cell {
      padding: 10px 7px 10px 10px;
    }
    .van-popup--center {
      width: 300px;
      height: 40px;
      input {
        width: 98%;
        height: 86%;
        border: none;
      }
    }
  }
  .van-search {
    float: right;
    width: 84%;
    padding: 5px 8px;
  }
}
.van-swipe {
  width: 100%;
  .van-swipe__track {
    width: 100%;
  }
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
